<template>
  <div class="">
    <div class="page-container padding-lr-sm padding-top-sm">
      <span class="page-title">安全设置</span>
      <div class="margin-top-sm">
        <div class="item-box">
          <div class="item-left">
            <!--<a-icon type="check-circle" class="icon-success"/>-->
            <a-icon type="exclamation-circle" class="icon-warning"/>
          </div>
          <div class="item-center">
            <div class="item-title">
              <span class="text-warning margin-right-xs">[未设置]</span>
              <span>登录密码</span>
            </div>
            <div class="item-content">
              安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码
            </div>
          </div>
          <div class="item-right">
            <a-button type="link" @click="handleLoginPasswdEdit()">修改</a-button>
          </div>
        </div>
        <div class="item-box">
          <div class="item-left">
            <a-icon type="check-circle" class="icon-success"/>
            <!--<a-icon type="exclamation-circle" class="icon-warning"/>-->
          </div>
          <div class="item-center">
            <div class="item-title">
              <!--<span class="text-warning margin-right-xs">[未设置]</span>-->
              <span>手机绑定</span>
            </div>
            <div class="item-content">
              您已绑定了手机 <a>155****5646</a> [您的手机为安全手机，可用于接收消息，账号核身（如找回密码、变更安全设置等）]
            </div>
          </div>
          <div class="item-right">
            <a-button type="link" @click="()=>{emailVisible=true}">修改</a-button>
          </div>
        </div>
        <div class="item-box">
          <div class="item-left">
            <!--<a-icon type="check-circle" class="icon-success"/>-->
            <a-icon type="exclamation-circle" class="icon-warning"/>
          </div>
          <div class="item-center">
            <div class="item-title">
              <span class="text-warning margin-right-xs">[未设置]</span>
              <span>备用邮箱</span>
            </div>
            <div class="item-content">
              备用邮箱绑定后可用来接收阿里云发送的各类系统、营销、服务通知。
            </div>
          </div>
          <div class="item-right">
            <a-button type="link" @click="()=>{phoneBindingVisible=true}">马上设置</a-button>
          </div>
        </div>
      </div>
    </div>
    <div class="page-container padding-lr-sm padding-top-sm margin-top-sm">
      <div class="item-box loginout-box">
        <div class="item-center">
          <div class="item-title">
            <span>注销账号</span>
          </div>
          <div class="item-content">
            如果您不再使用此账号，可以将其注销。账号成功注销后，其下所有服务、数据及隐私信息将会被删除并将无法恢复，详情 <a>查看帮助文档</a>
          </div>
        </div>
        <div class="item-right">
          <a-button type="danger" ghost>确认注销</a-button>
        </div>
      </div>
    </div>
    <loginPasswordModal :visible="loginPasswordVisible" @cancel="()=>{loginPasswordVisible=false}" @ok="()=>{loginPasswordVisible=false}"></loginPasswordModal>
    <emailModal :visible="emailVisible" @cancel="()=>{emailVisible=false}" @ok="()=>{emailVisible=false}"></emailModal>
    <phoneBindingModal :visible="phoneBindingVisible" @cancel="()=>{phoneBindingVisible=false}" @ok="()=>{phoneBindingVisible=false}"></phoneBindingModal>
  </div>
</template>

<script>
  import loginPasswordModal from './modal/securitySetting/loginPasswordModal'
  import emailModal from './modal/securitySetting/emailModal'
  import phoneBindingModal from './modal/securitySetting/phoneBindingModal'

  export default {
    name: "basicSetting",
    components:{
      loginPasswordModal,
      emailModal,
      phoneBindingModal
    },
    data() {
      return {
        loginPasswordVisible:false,
        emailVisible:false,
        phoneBindingVisible:false,
      }
    },
    methods:{
      handleLoginPasswdEdit(){
        this.loginPasswordVisible = true
      }
    }
  }
</script>

<style scoped lang="less">
  .page-container {
    box-shadow: #eee 0px 0px 30px 0px;
    .item-box {
      border-bottom: 1px solid #e8e8e8;
      padding: 10px 20px 40px;
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      .item-left {
        font-size: 18px;
        display: flex;
        .icon-success {
          color: #52c41a;
        }
        .icon-warning {
          color: #ff4d4f;
        }
      }
      .item-center {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        .item-title {
          color: #1f1f1f;
          font-weight: 700;
          line-height: 18px;
          margin-bottom: 4px;
        }
        .item-content {
          color: #949494;
        }
      }
      .item-right {
        display: flex;
        align-items: center;
      }
      .text-warning {
        color: #ff4d4f;
      }
    }
    .loginout-box {
      padding-left: 0;
      padding-bottom: 35px;
      .item-title {
        font-size: 15px;
        margin-bottom: 20px !important;
      }
    }
  }

</style>
